<template>
  <div>
    <h2>用户信息管理</h2>
    <form @submit.prevent="saveUserInfo">
      <label for="username">用户名：</label>
      <input type="text" v-model.trim="user.username" id="username" required>
      <label for="email">邮箱：</label>
      <input type="email" v-model.trim="user.email" id="email" required>
      <label for="phone">电话：</label>
      <input type="tel" v-model.trim="user.phone" id="phone">
      <button type="submit">保存</button>
    </form>
    <div v-if="savedMessage" class="success-message">{{ savedMessage }}</div>
    <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        username: '',
        email: '',
        phone: ''
      },
      savedMessage: '',
      errorMessage: ''
    };
  },
  methods: {
    saveUserInfo() {
      // 这里可以添加实际的保存用户信息的逻辑，比如发送请求到后端
      if (this.user.username && this.user.email && this.user.phone) {
        this.savedMessage = '用户信息保存成功！';
        this.errorMessage = '';
      } else {
        this.errorMessage = '请填写完整的用户信息！';
        this.savedMessage = '';
      }
    }
  }
};
</script>

<style scoped>
h2 {
  text-align: center;
}
form {
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
label {
  display: block;
  margin-bottom: 5px;
}
input {
  width: 100%;
  padding: 5px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}
button {
  width: 100%;
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
.success-message {
  color: green;
  margin-top: 10px;
}
.error-message {
  color: red;
  margin-top: 10px;
}
</style>